<!-- 用 https://github.com/drublic/css-modal 做 login 畫面 -->

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website.">
    <title>Bookdown:View</title>
<!--<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.0/build/pure-min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css"> -->
    <link rel="stylesheet" href="/css/pure-min.css">
    <link rel="stylesheet" href="/katex/katex.min.css">
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="/main.css">
  <![endif]-->
  <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="/main.css">
  <!--<![endif]-->
</head>
<body onload='load("{{{book.id}}}", "{{{file.id}}}")'>
<div class="header pure-menu pure-menu-horizontal"">
  <ul class="pure-menu-list">
    <li class="pure-menu-item"><a href="README.md" class="pure-menu-link">{{{book.title}}}</a></li>
    <input id="searchQuery" type="text" placeholder=" search" size="10" style="border-radius: 5px;">
    <li class="pure-menu-item"><a onclick="view()" class="pure-menu-link">View</a></li>
    <li class="pure-menu-item"><a onclick="edit()" class="pure-menu-link">Edit</a></li>
    <li class="pure-menu-item"><a onclick="save()" class="pure-menu-link">Save</a></li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
      <a href="#" id="menuLink1" class="pure-menu-link">Menu</a>
      <ul class="pure-menu-children">
        <li class="pure-menu-item"><a onclick="loginDialog()" class="pure-menu-link">Login</a></li>
        <li class="pure-menu-item"><a onclick="logout()" class="pure-menu-link">Logout</a></li>
        <li class="pure-menu-item"><a href="/author" class="pure-menu-link">Author</a></li>
      </ul>
    </li>
  </ul>
</div>

<div id="layout">
  <!-- Menu toggle -->
  <a href="#menu" id="menuLink" class="menu-link">
    <!-- Hamburger icon -->
    <span></span>
  </a>

  <div id="menu">
    <div class="pure-menu">
      <a class="pure-menu-heading" href="/">Catalog</a>
      <ul class="pure-menu-list">
        {{#book.parts}}
        <li class="pure-menu-item"><a href="{{{link}}}" class="pure-menu-link">{{{title}}}</a></li>
        {{/book.parts}}
      </ul>
    </div>
  </div>

  <div id="main">
    <div class="content" id="viewBox">
      {{{file.html}}}
    </div>
    <div class="content" id="editBox">
      <br/>
      <textarea id="md" name="md">{{{file.md}}}</textarea>
    </div>
    <div class="content" id="searchBox">
    </div>
    <div class="content" id="loginBox">
      <div style="width:50vw; margin-top:10vh">
      <form class="pure-form pure-form-aligned"> 
        <fieldset>
          <div class="pure-control-group">
            <label for="user">User</label>
            <input id="user" type="text" placeholder="User">
          </div>

          <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
          </div>

          <div class="pure-controls">
            <button type="button" class="pure-button pure-button-primary" onclick="login()">Submit</button>
          </div>
        </fieldset>
      </form>     
      </div>
    </div>
  </div>
</div>
<script id="searchTemplate" type="text/x-handlebars-template">
  {{#obj}}
  <h3>{{{path}}}</h3>
	<p>content</p>
	{{/obj}}
</script>
<script src="/bookdown.js"></script>
<script src="/js/ui.js"></script>
<script src="/js/showdown.min.js"></script>
<script src="/katex/katex.min.js"></script>

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js"></script>-->
</body>
</html>
